<template>
  <div class="page-container">
    <formHeader @handleForm="handleForm"></formHeader>
    <div style="margin-bottom: 20px">
      <el-button @click="addStudents">新增毕业学生</el-button>
      <el-button>批量删除</el-button>
      <el-button>学生批量导入</el-button>
      <el-button>学生信息导出</el-button>
    </div>
    <tableCmp :product-data="productData" :header-data="headerData">
      <template #controls>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <div style="display: flex">
              <el-button size="small" @click="checkItem(scope.row)"
                >查看</el-button
              >
              <el-button size="small" @click="editItem(scope.row)"
                >编辑</el-button
              >
              <el-button size="small">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </template>
    </tableCmp>
    <el-pagination
      background
      layout="prev, pager, next, jumper,->,total, sizes"
      :total="total"
      v-model:page-size="data.limit"
      @current-change="currentChange"
      :page-sizes="[10, 15, 20, 25]"
    />
    <dialogMask
      :dialog-form="dialogForm"
      :rule-form="ruleForm"
      @centerDialogVisible="centerDialogVisible"
    ></dialogMask>
  </div>
</template>
<script setup>
/**
 * 模块引入
 */
import { onMounted, reactive, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { studentsList, studentsAdd } from "../../api/modules/home";
import tableCmp from "../../components/tableData.vue";
import formHeader from "../../components/formHeader.vue";
import dialogMask from "../../components/dialogTable.vue";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
/**
 * 数据
 */
const dialogForm = ref({
  dialogFormVisible: false,
  content: "",
});

const ruleForm = ref({});
const studentForm = ref({});
const headerData = ref([
  {
    key: "stuName",
    label: "学生姓名",
    type: "",
    width: "80",
  },
  {
    key: "className",
    label: "班级",
    type: "",
    width: "",
  },
  {
    key: "collegeName",
    label: "学院名称",
    width: "",
  },
  {
    key: "expertiseName",
    label: "专业",
    width: "",
  },
  {
    key: "workCity",
    label: "上班城市",
    width: "",
    type: "city",
  },
  {
    key: "salary",
    label: "毕业薪资",
    width: "",
  },
  {
    key: "status",
    label: "学生状态",
    width: "",
    type: "tableStatus",
  },
  {
    key: "origin",
    label: "市场部来源",
    width: "120",
  },
  {
    key: "gradYear",
    label: "毕业年份",
    width: "90",
  },
  {
    key: "createdTime",
    label: "创建时间",
    width: "100",
    type: "createdTimes",
  },
  {
    key: "",
    label: "操作列",
    slot: "controls",
    width: "150",
    type: "fixed",
  },
]);
const limit = ref(10);
const skip = ref(0);
const total = ref(0);
const data = ref({
  limit: limit.value,
  skip: skip.value,
  stuName: "",
});
const optionsData = {
  origin: null,
  collegeId: null,
  workCity: "",
};

const productData = ref([]);
const productList = async () => {
  let res = await studentsList(data.value);
  productData.value = res.data.data.result;
  total.value = res.data.data.total;
  console.log(res.data.data.result, "1213321");
};

const handleForm = (formInline) => {
  data.value = Object.assign({}, data.value, formInline);
  console.log("参数", formInline);
  optionsData.collegeId = formInline.collegeId;
  optionsData.origin = formInline.origin;
  optionsData.workCity = formInline.workCity;
  productList();
};
function addStudents() {
  dialogForm.value.dialogFormVisible = true;
  dialogForm.value.content = "新增";
  ruleForm.value = {};
}
const editItem = (val) => {
  dialogForm.value.dialogFormVisible = true;
  dialogForm.value.content = "编辑";
  val.collegeName == "游戏学院" ? (val.collegeId = 1) : (val.collegeId = 2);
  val.expertiseName == "游戏设计"
    ? (val.expertiseId = 1)
    : val.expertiseName == "游戏开发"
    ? (val.expertiseId = 2)
    : (val.expertiseId = 3);
  ruleForm.value = val;
};
const checkItem = (val) => {
  dialogForm.value.dialogFormVisible = true;
  dialogForm.value.content = "查看";
};

const centerDialogVisible = async (val) => {
  studentForm.value = val._rawValue;
  studentForm.value.gradYear = new Date(
    studentForm.value.gradYear.toString()
  ).getFullYear();
  studentForm.value.salary = studentForm.value.salary * 1;
  if (dialogForm.value.content == "新增") {
    let res = await studentsAdd(studentForm.value);
    console.log(res.data);
  }

  productList();
};

function currentChange(val) {
  console.log(val);
  data.value.skip = val;
  productList();
}
watch([() => data.value.limit, () => data.value.skip], () => {
  console.log("监听");
  productList();
});
onMounted(() => {
  productList();
});
</script>
<style lang="less" scoped>
.el-button {
  background: #4060c7;
  color: white;
  border-radius: 5px;
}
</style>
